<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="addccc">
          <div class="timeZone">
            <el-select v-model="product" placeholder="请选择产品">
              <el-option
                v-for="item in productcode"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="timeZone">
            <el-input
              style="width: 200px"
              v-model="global"
              placeholder="查询"
            ></el-input>
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="报备方:">
                  <span>{{ props.row.name1 }}</span>
                </el-form-item>
                <el-form-item label="联系人:">
                  <span>{{ props.row.name1 }}</span>
                </el-form-item>
                <el-form-item label="采购计划:">
                  <span>{{ props.row.shop }}</span>
                </el-form-item>
                <el-form-item label="交货周期:">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="经费来源:">
                  <span>{{ props.row.shopId }}</span>
                </el-form-item>
                <el-form-item label="预计签订时间:">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
                <el-form-item label="报备日期:">
                  <span>{{ props.row.address }}</span>
                </el-form-item>
                <el-form-item label="其他信息:">
                  <span>{{ props.row.desc }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="客户单位" prop="name"> </el-table-column>
          <el-table-column label="标的物" prop="desc"> </el-table-column>
          <el-table-column label="报价(元)" prop="desc1"> </el-table-column>
          <el-table-column label="采购数量" prop="desc2"> </el-table-column>
          <el-table-column label="成功率" prop="desc3"> </el-table-column>
          <el-table-column label="虚拟成就额" prop="desc4"> </el-table-column>
          <el-table-column label="更新人员" prop="desc5"> </el-table-column>
          <el-table-column label="备注" prop="desc5"> </el-table-column>
          <el-table-column label="操作" width="240" align="center">
            <template #default="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleEdit(scope.$index, scope.row)"
                >更新</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      global: "",
      product: "",
      productcode: [],
      tableData: [
        {
          name1: "张三",
          name: "xxxx",
          category: "xxxxxx",
          desc: "xxxxxx",
          desc1: "USG",
          desc2: "10000",
          desc3: "1",
          desc4: "xxxxx",
          desc5: "1",
          address: "xxxx",
          shop: "xxxxx",
          shopId: "xxxxxx",
        },
      ],
    };
  },
};
</script>

<style >
.addccc {
  margin-bottom: 20px;
  margin-left: 20px;
  display: flex;
}
.timeZone {
  margin-left: 20px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 100px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>